<style lang="less">
    @import './style.less';
</style>

<template>
    <div class="answer">
        <div class="op-header">
            <div class="search">
                <el-button
                    class="search-button"
                    size="small"
                    type="primary"
                    @click="search">
                    <i class="el-icon-search icon-right" />查询
                </el-button>
                <el-input
                    class="search-input "
                    size="small"
                    v-model="searchInput"
                    placeholder="请输入查询关键字"
                    prefix-icon="el-icon-search" />
            </div>
        </div>
        <table-ex
            :rows="answers"
            :total="answersTotal"
            :columns="columns"
            :options="options"
            :on-option="onClickOption"
            :on-operation="onClickOperation"
            :on-page-change="onPageChange"/>
        <dialog-ex
            v-if="!!dialogModal"
            :title="this.dialogModal === 'edit' ? '回复' : ''"
            :form="form"
            :mode="dialogModal"
            :init="currentAnswer"/>
    </div>
</template>

<script>
    import { mapGetters, mapActions, mapMutations } from 'vuex'
    import pageConfig from './config'
    
    import tableEx from '@/components/table/tableEx'
    import dialogEx from '@/components/dialog/dialogEx'

    export default {
        name: 'answer',
        components: {
            'table-ex': tableEx,
            'dialog-ex': dialogEx
        },
        data() {
            return {
                searchInput: '',
                dialogModal: '',
                currentAnswer: null,
                columns: pageConfig.columns,
                options: pageConfig.options,
                form: {
                    items: pageConfig.formReplyItems,
                    actions: {
                        cancel: () => {
                            this.dialogModal = ''
                        },
                        confirm: (data, mode) => {
                            this.dialogModal = ''
                            if (mode === 'edit') {
                                console.log(data)
                                this.replyAnswer(data)
                            }
                        }
                    }
                }
            }
        },

        /**
         * 生命钩子
         **/
        created() {
            this.loadData()
        },

        mounted() {},

        /**
         * 计算
         **/
        computed: {
            ...mapGetters({
                answers: 'answers',
                answersTotal: 'answersTotal'
            })
        },
        /**
         * 监控
         **/
        watch: {},

        /**
         * 事件
         **/
        methods: {

            ...mapActions([
                'getAnswers',
                'removeAnswer',
                'replyAnswer'
            ]),
            ...mapMutations([
                'SETANSWERPAGE'
            ]),

            loadData() {
                this.getAnswers()
            },

            search() {
                const filter = {
                    title: this.searchInput ? this.searchInput : null,
                }
                this.SETANSWERPAGE({
                    number: 1,
                   filter
                })
                this.getAnswers()
            },

            onClickOption(option, rows) {
                if (option === 'batchrefresh') {
                    this.loadData()
                } else {
                    let lIds = rows.map(item => { return item.id })
                    this.removeAnswer({ lIds })
                }
            },

            onClickOperation(oper, row) {
                if (oper.prop === 'delete') {
                    let params = {
                        'lIds': [row.id]
                    }
                    this.removeAnswer(params)
                } else if (oper.prop === 'edit'){
                    this.dialogModal = 'edit'
                    this.currentAnswer = row
                }
            },
            onPageChange(number) {
                this.SETANSWERPAGE({ number })
                this.getAnswers()
            }
        },
    }
</script>

